<template>
  <view class="container">
    <view
      class="tab-item"
      v-for="(tab, index) in tabs"
      :key="index"
      :class="{ 'screen-item-active': activeTab === index }"
      @click="changeTab(index)"
    >
      {{ tab }}
    </view>
    <view style="height: 100%"
      ><DrawerComponent :show="showDrawer" :onClose="closeDrawer" class="drawer-component"
    /></view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import DrawerComponent from '../../../pages/search/components/FilterDrawer.vue'
const showDrawer = ref(false)
const closeDrawer = () => {
  showDrawer.value = false
}
// 定义 props
const props = defineProps({
  tabs: {
    type: Array,
    required: true,
    default: () => ['推荐', '同城', '匹配我'],
  },
  activeTab: {
    type: Number,
    default: 0,
  },
})

// 定义 emits
const emit = defineEmits(['update:activeTab'])

// 定义方法
function changeTab(index) {
  emit('update:activeTab', index)
}
</script>

<style scoped>
.drawer-component {
  position: absolute;
  right: 50rpx;
  top: 45rpx;
  z-index: 10000;
}
.container {
  background-color: #ffffff;
  display: flex; /* 使用flexbox布局 */
  justify-content: left; /* 子元素在主轴(水平)方向上均匀分布 */
  align-items: center; /* 子元素在交叉轴(垂直)方向上居中对齐 */
  height: 130rpx; /* 设置容器高度，可根据需要调整 */
  /* position: relative; 使容器内的绝对定位子元素相对于该容器进行定位 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.tab-item {
  display: flex; /* 使用flexbox布局 */
  align-items: center; /* 子元素在交叉轴(垂直)方向上居中对齐 */
  justify-content: center; /* 子元素在主轴(水平)方向上居中对齐 */
  padding: 30rpx; /* 设置内边距 */
  font-size: 35rpx; /* 设置初始字体大小 */
  position: relative; /* 使元素内的绝对定位子元素相对于该元素进行定位 */
  transition: font-size 0.3s, font-weight 0.3s; /* 设置字体大小和粗细的过渡效果 */
}

.screen-item-active {
  font-size: 45rpx; /* 设置活动项的字体大小 */
  font-weight: bold; /* 设置活动项的字体粗细 */
}

.screen-item-active::after {
  content: ''; /* 伪元素的内容为空 */
  position: absolute; /* 绝对定位伪元素 */
  left: 50%; /* 伪元素水平居中 */
  bottom: 0; /* 伪元素垂直对齐到父元素的底部 */
  height: 16rpx; /* 伪元素的高度 */
  background-image: linear-gradient(to right, #6acad5, #6acdd9); /* 渐变背景色 */
  width: 25%; /* 伪元素的宽度 */
  transform: translateX(-50%); /* 将伪元素的中心点移动到父元素的中心 */
  border-radius: 8rpx; /* 设置伪元素的圆角 */
}
</style>
